<template>
  <div class="container-fluid">
    <div class="row center-block">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-3">
            <div class="box-body">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">通讯录</h3>
                </div>
                <div class="box-body">
                  <section id="departTree">
                    <departTree ref='departTree' @nodechange="nodechange"></departTree>
                  </section>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-9">
            <div class="box-body">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">单位详情</h3>
                  <div class="box-tools pull-right">
                    <el-button type="primary" @click='()=>isExport = true'>
                      <i class='fa fa-cloud-download'>导出通讯录</i>
                    </el-button>
                  </div>
                </div>
                <div class="box-body">
                  <section class="content" id="departDetail">
                    <DepartDetail ref="departDetail" :editable="isEditNode"></DepartDetail>
                  </section>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title='导出通讯录' v-if="isExport" :visible.sync="isExport" :before-close="()=>isExport = false" :modal="true" width="20%">
      <ExportUserData ref='exportUserDataView'></ExportUserData>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="exportContractdata">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import Common from "./common"
import departTree from '../mycomponents/departs/departTree'
import dragTree from '../mycomponents/departs/dragTree'
import PersonUtils from "../../common/personUtils"
import DepartBaseInfo from '../mycomponents/departs/DepartBaseInfo'
import ExportUserData from "../mycomponents/users/ExportUserData"
import DepartDetail from '../mycomponents/departs/DepartDetail'
let personUtil = new PersonUtils()
export default {
  name: 'Contact',
  components: {
    departTree,
    DepartDetail,
    DepartBaseInfo,
    dragTree,
    ExportUserData
  },
  data: function() {
    return {
      isEditNode: false,
      editable: true,
      currentDepart: null,
      isExport:false,
      selectedDepart: {
        baseInfo: {
          address: '',
          zipcode: '',
          areacode: '',
          fax: '',
          tel: ''
        },
        empoyees: [],
        helper: null
      },
      editTree: {
        name: 'Root',
        id: 0,
        subDepartments: []
      }
    }
  },
  beforeCreate: function() {

  },
  created: function() {
    this.helper = new Common()
  },
  mounted: function() {
    this.$nextTick(() => {
      this.helper.autoheight("departDetail")
      this.helper.autoheight("departTree")
      this.loadTreeData()
    })
  },
  methods: {
    assignData(data) {
      this.editTree = data
      //this.$refs.editDepartTree.$forceUpdate()
    },
    nodechange: function(node) {
      this.currentDepart = node
      this.getdepartData(node)
    },
    // 获取节点详情
    getdepartData: function(node) {
      this.$http.get('/hr/department/get?id=' + node.id)
        .then(response => {
          console.log("get response" + response);
          if (response.body.result == 1) {
            var depart = response.body.body
            let eDepart = {
              baseInfo: {
                zipcode: depart.postalcode,
                tel: depart.telephone,
                address: depart.address,
                fax: depart.fax,// TODO 修改为传真
                name: depart.name,
                areacode: depart.areaCode //TODO 添加区号
              },
              employees: depart.employees
            }
            this.$refs.departDetail.departChanged(eDepart)
          }
        }, response => {
          console.log('failed:' + response.data)
        })
    },
    loadTreeData(){
      Vue.http.post('/hr/department/list').then(response => {
        this.editTree = response.data.body[0]
        console.log("tree:" + JSON.stringify(this.editTree))
        //this.$refs.editDepartTree.$forceUpdate()
        //this.$refs.editDepartTree.setData(this.editTree)
      }, response => {
        console.log(response)
      })
    },
    assignTree(treeData) {
      if (treeData && treeData.subDepartments && treeData.subDepartments.length >0){
        for(var index in treeData.subDepartments){
          if(index ==0){
            treeData.subDepartments[0].parentId = treeData.id
            treeData.subDepartments[0].preSiblingId = null
          }
          else{
            treeData.subDepartments[index].parentId = treeData.id
            treeData.subDepartments[index].preSiblingId = treeData.subDepartments[index-1].id
          }

          let node = treeData.subDepartments[index]
          this.assignTree(node)
        }
      }
    },
    exportContractdata() {
      var filename = this.$refs.exportUserDataView.getData()
      if(filename){
        personUtil.exportContractdata(filename.fileName)
        this.isExport = false
      }
    },
  }
}
</script>

<style>
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
}
</style>
